<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>边框跑马灯效果</title>
<style>
  @keyframes marquee {
    from {
      transform: translateX(100%);
    }
    to {
      transform: translateX(-100%);
    }
  }

  .marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    padding: 10px;
    border: 5px solid transparent;
    animation: marquee 10s linear infinite;
  }

  .marquee--primary {
    border-image: linear-gradient(to right, #30cfd0 0%, #330867 100%) 1;
    border-image-slice: 10;
  }

  .marquee--secondary {
    border-image: linear-gradient(to right, #ff6e7f 0%, #5085ff 100%) 1;
    border-image-slice: 10;
    animation-delay: 2s;
  }

  .marquee--overlay {
    position: relative;
  }

  .marquee--overlay::before {
    content: '';
    position: absolute;
    top: -5px;
    left: -5px;
    right: -5px;
    bottom: -5px;
    border: 5px solid #ffeb3b;
    animation: marquee 10s linear infinite;
    animation-delay: 4s;
  }
</style>
</head>
<body>

<div class="marquee marquee--primary">跑马灯效果 - 彩虹边框</div>
<div class="marquee marquee--secondary">跑马灯效果 - 渐变边框</div>
<div class="marquee marquee--overlay">跑马灯效果 - 叠加边框</div>

</body>
</html>